<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>反转字符串</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        输入的信息:<input type="text" v-model="info"><br/>
        <!--
            三个问题:
                1.可读性差
                2.代码没有得到复用
                3.难以维护
        -->
        反转的信息:{{info.split('').reverse().join('')}}<br/>
        反转的信息:{{info.split('').reverse().join('')}}<br/>
        反转的信息:{{info.split('').reverse().join('')}}<br/>
        反转的信息:{{info.split('').reverse().join('')}}<br/>
        反转的信息:{{info.split('').reverse().join('')}}<br/>
    </div>

    <script>
         const vm = new Vue({
                 el : '#app',
                 //Model M
                 data : {
                     msg : '计算属性-反转字符串案例',
                     info : ''
                 }
             })
    </script>

</body>
</html>